<template>
  <div class="container" v-if="order">
    <van-notice-bar text="申请退款的订单商家通过后，资金将于1~3个工作日原路退回，如有问题请联系客服" />
    <van-cell-group>
      <van-cell title="订单号" :value="order.no" isLink @click="goToOrderInfo(order.id)" />
      <van-cell title="退换货理由" :value="reason || '请选择退货理由'" isLink @click="switchReason"  />
      <div v-show="show_select_reason" class="sheet-box"  @close="switchReason" title="退换货理由">
        <div class="address-sheet-item" v-for="(item, index) in reason_data" :key="index" @click="onReasonClick(item.name)">
          <p class="address-item-title">{{item.name}}</p>
        </div>
    </div>
      <van-field type="textarea" label="留言" :value="customer_message"   autosize @change="onCustomerMsg"></van-field>
    </van-cell-group>
    <van-cell-group v-if="order.roe_status" style="margin-top: 10px;" :border="false">
      <van-cell title="退换货状态" :value="transOrderRoeStatus" />
      <van-field v-if="order.roe_business_message"  type="textarea" label="商家留言"  readonly autosize :value="order.roe_business_message"></van-field>
    </van-cell-group>
    <div v-if="!order.roe_status" class="save-btn">
      <van-button type="primary" size="large" @click="submit">提交</van-button>
    </div>
    <page-footer />
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import * as OrderAction from '@/api/order'
import Toast from 'vant-weapp/dist/toast/toast'
import pageFooter from '@/components/page-footer.vue'
import Utils from '@/utils'

export default {
  components: {
    pageFooter
  },
  data () {
    return {
      order: null,
      show_select_reason: false,
      reason_data: [
        { name: '换货' },
        { name: '未收到货' },
        { name: '货品有问题' },
        { name: '买多/买错/不想要' },
        { name: '其它' }
      ],
      reason: '请选择',
      customer_message: ''
    }
  },
  computed: {
    transOrderRoeStatus () {
      if (!this.order) return 0
      return Utils.transOrderRoeStatus(this.order.roe_status)
    }
  },
  methods: {
    switchReason () {
      this.show_select_reason = !this.show_select_reason
    },
    onReasonClick (val) {
      this.reason = val
      this.show_select_reason = false
    },
    onCustomerMsg (event) {
      this.customer_message = event.mp.detail
    },
    goToOrderInfo (id) {
      wx.navigateTo({
        url: 'detail?id=' + id
      })
    },
    submit () {
      if (!this.order) return ''
      if (!this.reason) {
        Toast('请选择理由')
        return
      }
      let params = {}
      params.reason = this.reason
      params.customer_message = this.customer_message
      OrderAction.applyRoe(this.order.id, params)
        .then(data => {
          Toast('提交成功')
          this.goToOrderInfo(this.order.id)
        })
        .catch(err => Toast(err.msg))
    },
    fetchOrder () {
      this.order = null
      OrderAction.show(this.$root.$mp.query.id)
        .then(data => {
          wx.hideNavigationBarLoading()
          this.order = data
          this.reason = data.roe_reason
          this.customer_message = data.roe_customer_message
        })
        .catch(err => Toast(err.msg))
    }
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.fetchOrder()
    wx.stopPullDownRefresh()
  },
  beforeMount () {
    wx.showNavigationBarLoading()
    this.fetchOrder()
  }
}
</script>
<style lang="less" scoped>
.container {
  position:relative;
  padding-bottom:80px;
  .save-btn {
    margin: 10px;
  }
}

.sheet-box {
  .address-sheet-item {
    padding: 10px 15px;
    border-top: 1rpx solid #F2F2F2;
    .address-item-title {
      color: #333;
      font-size: 14px;
      line-height: 1.5;
    }
    .address-item-detail {
      font-size: 12px;
      line-height: 1.5;
      color: #666;
    }
  }
  .address-sheet-item:hover,
  .address-sheet-item:active {
    background: rgb(221, 219, 219)
  }
}
</style>


